<template>
	<view class="form-container">
		<!-- form演示 -->
		<view class="form-group">
			<form class="form-main">
				<!-- <view class="form-group">
					<h3>站台号</h3>
					<view>
						<input id="user-insert-line" focus="true" v-model="model.CallStation" name="input"
							placeholder="站台编号" />
					</view>
				</view> -->
				<view class="form-group">
					<uni-section title="选择铸造设备" type="line"></uni-section>
					<view class="example-body">
						<combox-search label="铸造设备" labelWidth="100px" emptyTips="无匹配选项" :isJSON="true"
							:keyName="keyNameCode" :candidates="candidatesDev" placeholder="选择铸造设备"
							@getValue="getValues($event)">
						</combox-search>
					</view>
				</view>
				<view class="form-group">
					<h5>是否补料（如果只把空料车拉走不需要补料,勾选）</h5>
					<view class="radio-group">
						<checkbox-group @change="selfChangde" name="isSupply">
							<label>
								<checkbox :checked="selfChecked" style="transform:scale(0.8)" />
								<text>不补料</text>
							</label>
						</checkbox-group>
					</view>
				</view>
				<view class="form-group">
					<uni-section title="选择生产物料信息" type="line"></uni-section>
					<view class="example-body">
						<combox-search label="生产物料信息" labelWidth="100px" emptyTips="无匹配选项" :isJSON="true"
							:keyName="keyName" :candidates="candidates" placeholder="选择生产物料信息"
							@getValue="getValue($event,'mal')">
						</combox-search>
					</view>
				</view>
				<view class="form-group">
					<h3>补料数量：</h3>
					<view class="radio-group">
						<!-- <radio-group>
							<radio @click="SupplyNum(1)" /><text>1</text>
							<radio @click="SupplyNum(2)" style="margin-left: 10%;" /><text>2</text>
						</radio-group> -->

						<radio-group @change="radioChange">
							<label class="radios" v-for="(item, index) in items" :key="item.value">
								<view>
									<radio :value="item.value" :checked="index === current" />
									<text>{{item.name}}</text>
								</view>
							</label>
						</radio-group>

					</view>
				</view>
				<view class="form-group1"><button class="btnsubmit" :class='{active:isAddShow==true}'
						:disabled="isAddShow" @click="deterMine" form-type="submit">确定</button>
				</view>
				<view class="form-group1"><button type="default" form-type="reset">重置</button></view>
			</form>
		</view>
	</view>
</template>

<script>
	import comboxSearch from "@/components/cuihai-combox/cuihai-combox.vue"
	import uniSection from "@/components/uni-section.vue"
	export default {
		components: {
			comboxSearch,
			uniSection
		},
		data() {
			return {
				items: [{
						value: 'ONE',
						name: '1',
						checked: 'true'
					},
					{
						value: 'TWO',
						name: '2'
					},
				],
				current: 0,
				candidates: null,
				tabIndex: 0,
				labelPosition: 'top',
				errorType: ['message'],
				border: false,
				model: {
					CallStation: '',
				},
				selfChecked: false,
				//屏幕高度
				screenHeight: 0,
				keyName: 'materialType',
				isAddShow: false,
				candidatesDev: [{
					devCode: 'D1',
				}, {
					devCode: 'D2',
				}, {
					devCode: 'D3',
				}, {
					devCode: 'D4',
				}, {
					devCode: 'D5',
				}, {
					devCode: 'C1',
				}, {
					devCode: 'C2',
				}, {
					devCode: 'C3',
				}, {
					devCode: 'C4',
				}, {
					devCode: 'C5',
				}],
				keyNameCode: 'devCode',
				//isSupply:'',
			}
		},
		onLoad() {
			this.getInfo();
		},
		methods: {
			getValue(e, type) {
				switch (type) {
					case 'mal':
						this.mal = this.candidates[e].materialType;
						break;
					default:
						break;
				}
				console.log(e);
			},
			selfChangde(e) {
				this.selfChecked = !this.selfChecked;
				if (this.selfChecked == true) {
					this.isSupply = 1
					console.log('----' + this.isSupply)
					console.log('=====' + this.selfChecked)
				} else if (this.selfChecked == false) {
					this.isSupply = 0
				}
			},
			// SupplyNum(e) {
			// 	//console.log(e,'---')
			// 	this.SupplyNum = e //把传过来的值赋给点击的按钮
			// },
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			},
			getValues(e, type) {
				this.dev = this.candidatesDev[e].devCode;
				console.log(e);
			},
			getInfo() {
				uni.request({
					/* 网页 调试接口 */
					url: this.$global.url1 + ':5000/push/GetMaterialInfo',
					// url: 'http://10.5.51.252:5000/push/GetMaterialInfo',
					method: 'GET',
					sslVerify: false,
					header: {
						"Content-Type": "application/json; charset=UTF-8"
						// 'content-type':'application/x-www-form-urlencoded'
					},
					success: (res) => {
						if (res.statusCode == 200 && res.data.message == "SUCCESS") {
							uni.showToast({
								icon: 'success',
								title: '获取物料信息成功',
								mask: true,
							});
							this.candidates = res.data.resultData
						} else {
							uni.showToast({
								icon: 'error',
								mask: true,
								title: "获取物料信息失败",
							})
						}
					},
					fail: (res) => {
						uni.showToast({
							icon: 'error',
							mask: true,
							title: "获取物料信息失败",
						})
						console.log("error===" + res.errMsg)
					}
				})

			},
			deterMine() {
				const that = this
				uni.showModal({
					title: '提示',
					content: '确定叫料吗？',
					success: function(res) {
						if (res.confirm) {
							if (that.dev == null) {
								uni.showToast({
									title: '请选择铸造设备',
									icon: "none",
									duration: 3000,
									position: "top",
								});
								return
							} else if (that.mal == null) {
								uni.showToast({
									title: '请选择生产物料',
									icon: "none",
									duration: 3000,
									position: "top",
								});
								return
							} else {
								uni.request({
									/* 网页 调试接口 */
									//url: '/api/push/CallMaterial',
									/* Android 调试接口 */
									// url: 'http://10.5.51.252:5000/push/CallMaterial',
									url: that.$global.url1 + ':5000/push/CallMaterial',
									method: 'POST',
									sslVerify: false,
									data: {
										"CallStation": that.dev,
										"isSupply": that.isSupply,
										"SupplyNum": that.current + 1,
										"MaterialType": that.mal,
									},
									header: {
										"Content-Type": "application/json; charset=UTF-8"
										// 'content-type': 'application/x-www-form-urlencoded'
									},

									success: (res) => {
										if (res.statusCode == 200 && res.data.code == 0) {
											that.isAddShow = true
											uni.showToast({
												title: '叫料成功',
												icon: 'success',
												mask: true
											});
											setTimeout(function() {
												that.isAddShow = false
												console.log('1231313' + this.dev)
											}, 5000);
										} else if (res.data.code == 1) {
											uni.showToast({
												title: res.data.message,
												duration: 3000,
												icon: 'none',
												mask: true
											})
										} else if (res.data.code == 2) {
											uni.showToast({
												title: res.data.message,
												duration: 3000,
												icon: 'none',
												mask: true
											})
										} else {
											console.log('接口请求成功，输入内容有误：' + res.data)
											uni.showToast({
												title: 'Error',
												icon: 'error',
												mask: true
											})
											console.log(res)
										}
									},
									fail: (res) => {
										console.log(res.errMsg)
										uni.showToast({
											mask: false,
											icon: 'error',
											title: "接口请求失败!"
										})
									}
								})
							}
						} else if (res.cancel) {
							return
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #EEF0F4;
		font-size: 18px;
	}

	.btnsubmit {
		margin-top: 80px;
	}

	.form {
		margin-top: 35rpx;
		width: 100%;
		padding: 0 20rpx;
	}

	.form-group {
		padding: 5rpx 30rpx 0rpx 30rpx;
		margin-top: 5%;
	}

	.form-group1 {
		padding: -40rpx 30rpx 0rpx 30rpx;
		margin-top: 5%;
	}

	.radios {
		float: left;
	}

	// #user-insert-line::before {
	// 	position: absolute;
	// 	right: 25px;
	// 	bottom: 0;
	// 	top: 5rem;
	// 	left: 30px;
	// 	height: 1px;
	// 	content: '';
	// 	-webkit-transform: scaleY(.5);
	// 	transform: scaleY(.5);
	// 	background-color: #c8c7cc;
	// }
</style>
